// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好

const staticOption = {
  tooltip: {
    name: '数量',
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  color: ['#30a0d1', '#2ac2e2', '#9ee2bd', '#ffdd89', '#ffa286', '#fb6c84', '#ee7eb2', '#e5beeb', '#7574ee',
    '#0069df'
  ],
  series: [{
    name: '类型',
    type: 'pie',
    selectedOffset: 3,
    radius: [0, '45%'],
    minAngle: 90,
    label: {
      normal: {
        position: 'inner',
        fontSize: 20
      }
    },
    itemStyle: {
      borderWidth: 5,
      borderColor: 'transparent'
    },
    labelLine: {
      normal: {
        show: false
      }
    },
    data: []
  },
  {
    name: '类型',
    type: 'pie',
    radius: ['60%', '80%'],
    avoidLabelOverlap: false,
    label: {
      show: true,
      fontSize: 22
    },
    data: []
  }
  ]
}

const staticOptionHuge = {
  tooltip: {
    name: '数量',
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  color: ['#30a0d1', '#2ac2e2', '#9ee2bd', '#ffdd89', '#ffa286', '#fb6c84', '#ee7eb2', '#e5beeb', '#7574ee',
    '#0069df'
  ],
  series: [{
    name: '类型',
    type: 'pie',
    minAngle: 90,
    selectedOffset: 3,
    radius: [0, '35%'],
    label: {
      normal: {
        position: 'inner',
        fontSize: 26
      }
    },
    itemStyle: {
      borderWidth: 5,
      borderColor: 'transparent'
    },
    labelLine: {
      normal: {
        show: false
      }
    },
    data: []
  }, {
    name: '类型',
    type: 'pie',
    radius: ['50%', '70%'],
    avoidLabelOverlap: false,
    label: {
      show: true,
      fontSize: 32
    },
    data: []
  }
  ]
}

const staticOptionMid = {
  tooltip: {
    name: '数量',
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  color: ['#30a0d1', '#2ac2e2', '#9ee2bd', '#ffdd89', '#ffa286', '#fb6c84', '#ee7eb2', '#e5beeb', '#7574ee',
    '#0069df'
  ],
  series: [{
    name: '类型',
    type: 'pie',
    minAngle: 90,
    selectedOffset: 3,
    radius: [0, '30%'],
    label: {
      normal: {
        position: 'inner',
        fontSize: 14
      }
    },
    itemStyle: {
      borderWidth: 5,
      borderColor: 'transparent'
    },
    labelLine: {
      normal: {
        show: false
      }
    },
    data: []
  },
  {
    name: '类型',
    type: 'pie',
    radius: ['45%', '60%'],
    avoidLabelOverlap: false,
    label: {
      show: true,
      fontSize: 16
    },
    data: []
  }
  ]
}

// 备选颜色，有需求则进行循环
const colors = ['#00c0a7', '#1e8fff', '#0a64ca']
let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen <= 1600) {
      this.option = staticOptionMid
    }
    if (screen >= 3656) {
      this.option = staticOptionHuge
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // // 装配数据 必须使用箭头函数
    colorIndex = 0
    additionalOptions.dataInside.forEach((p1) => {
      this.option.series[0].data.push({
        value: p1.value,
        name: p1.name,
        selected: true,
        itemStyle: {
          color: colors[colorIndex]
        }
      })
      colorIndex += 1
    })
    this.option.series[1].data = additionalOptions.dataInClass
    this.option.series[1].dataInClass = additionalOptions.dataInClass
    this.option.series[1].dataOutClass = additionalOptions.dataOutClass
    this.option.series[1].dataBeforeClass = additionalOptions.dataBeforeClass
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series[0].data = []
    this.option.series[1].data = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
